<template>
  <div class="app-container">
    <div>
      <el-input placeholder="请输入编号" v-model="numberId" clearable class="account-input">
        <template slot="prepend">编号</template>
      </el-input>

      <el-input placeholder="请输入数量" v-model="count" clearable class="account-input">
        <template slot="prepend">数量</template>
      </el-input>

      <!-- <el-input placeholder="请输入成本" v-model="cost" clearable class="account-input">
        <template slot="prepend">成本</template>
      </el-input> -->

      <el-input placeholder="请输入价格" v-model="money" clearable value="number" class="account-input" @keyup.enter.native="submit">
        <el-select v-model="payType" slot="prepend" placeholder="请选择">
          <el-option label="微信" value="1"></el-option>
          <el-option label="支付宝" value="2"></el-option>
          <el-option label="银行卡" value="3"></el-option>
          <el-option label="现金" value="4"></el-option>
        </el-select>
      </el-input>

      <el-input placeholder="请输入备注" v-model="commit" clearable class="account-input">
        <template slot="prepend">备注</template>
        <el-button slot="append" icon="el-icon-check" @click="submit"></el-button>
      </el-input>

      <el-button size="mini" class="account-input" @click="rest">重置表格</el-button>
    </div>
    <div>
      <el-table
        :data="accountData"
        border
        show-summary
        :summary-method="getSummaries"
        max-height="500"
        size="mini"
        style="width: 100%">
        <el-table-column
          type="index">
        </el-table-column>
        <el-table-column
          prop="numberId"
          label="编号">
        </el-table-column>

        <el-table-column
          prop="count"
          label="数量">
        </el-table-column>

        <!-- <el-table-column
          prop="cost"
          label="成本">
        </el-table-column> -->
        <el-table-column
          prop="money"
          label="实收">
        </el-table-column>
        <el-table-column
          label="付款方式">
          <template slot-scope="scope">
            {{ scope.row.payType | payFilter}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, accountData)"
              type="text"
              size="small">
              移除
            </el-button>
            <!-- <el-button
              type="text"
              size="small">
              编辑
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
  },

  filters: {
    payFilter (status) {
      const statusMap = {
        1: '微信',
        2: '支付宝',
        3: '银行卡',
        4: '现金'
      }
      return statusMap[status]
    }
  },

  data () {
    return {
      numberId: '',
      count: '',
      // cost: '',
      payType: '1',
      commit: '',
      money: 0,
      accountData: []
    }
  },

  methods: {
    submit () {
      const info = {
        numberId: this.numberId,
        count: this.count,
        money: this.money,
        payType: this.payType,
        commit: this.commit
      }
      this.$store.dispatch('AddAccount', info).then((res) => {
        // console.log(res)
        info.id = res.data.id
        this.accountData.push(info)
        this.numberId = ''
        this.count = ''
        this.payType = '1'
        this.money = ''
      }).catch((err) => {
        console.log(err)
      })
    },
    deleteRow (index, rows) {
      this.$store.dispatch('DelAccount', { id: rows[index].id }).then((res) => {
        rows.splice(index, 1)
      }).catch((err) => {
        console.log(err)
      })
    },
    rest () {
      this.accountData = []
    },
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return
        }
        if (index === 1) {
          sums[index] = 'N/A'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          if (index === 2) {
            sums[index] += ' 件'
          } else {
            sums[index] += ' 元'
          }
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-select {
  width:90px;
}
.account {
  &-input {
    margin-bottom: 10px;
  }
}
</style>
